<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Any4Chat - 智能对话</title>

    <!-- 外部样式表 -->
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/a4a.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Any4Chat</h1>
            <p><a href="/" target="_blank">控制台</a> 丨 测试页面</p>
        </div>

        <div class="app-container">
            <!-- 聊天侧边栏 -->
            <div class="app-sidebar">
                <div class="sidebar-section">
                    <h3><i class="fas fa-comments"></i> 对话控制</h3>
                    <div class="chat-controls">
                        <button class="layui-btn layui-btn-primary" id="newChatBtn">
                            <i class="fas fa-plus"></i> 新对话
                        </button>
                    </div>
                </div>

                <!-- 历史记录区域 -->
                <div class="sidebar-section">
                    <h3><i class="fas fa-history"></i> 历史记录</h3>
                    <div class="conversation-history" id="conversationHistory">
                        <div class="history-loading" id="historyLoading" style="display: none;">
                            <i class="fas fa-spinner fa-spin"></i> 加载中...
                        </div>
                        <div class="history-empty" id="historyEmpty" style="display: none;">
                            <i class="fas fa-inbox"></i> 暂无历史记录
                        </div>
                        <div class="history-list" id="historyList">
                            <!-- 历史记录列表将在这里动态生成 -->
                        </div>
                    </div>
                </div>

  
                <div class="sidebar-section">
                    <h3><i class="fas fa-info-circle"></i> 状态</h3>
                    <div class="chat-settings">
                        <!-- 预览模式状态 -->
                        <div class="setting-item" id="previewModeStatus" style="display: none;">
                            <label class="setting-label">
                                <i class="fas fa-eye"></i> 预览模式
                            </label>
                            <div class="setting-control">
                                <span class="preview-mode-badge">
                                    已启用
                                </span>
                            </div>
                        </div>

                        <!-- 延迟模式状态 -->
                        <div class="setting-item" id="delayModeStatus" style="display: none;">
                            <label class="setting-label">
                                <i class="fas fa-clock"></i> 延迟模式
                            </label>
                            <div class="setting-control">
                                <span class="delay-mode-badge" id="delayModeBadge">
                                    已启用
                                </span>
                            </div>
                        </div>

                        <!-- 工具系统状态 -->
                        <div class="setting-item" id="toolsStatus" style="display: none;">
                            <label class="setting-label">
                                <i class="fas fa-tools"></i> 工具系统
                            </label>
                            <div class="setting-control">
                                <span class="tools-mode-badge">
                                    已启用
                                </span>
                            </div>
                        </div>

                        <!-- 预览超时状态 -->
                        <div class="setting-item" id="previewTimeoutStatus" style="display: none;">
                            <label class="setting-label">
                                <i class="fas fa-hourglass-half"></i> 预览超时
                            </label>
                            <div class="setting-control">
                                <span class="preview-timeout-badge" id="previewTimeoutBadge">
                                    60秒
                                </span>
                            </div>
                        </div>

                        <!-- 钉钉集成状态 -->
                        <div class="setting-item" id="dingtalkStatus" style="display: none;">
                            <label class="setting-label">
                                <i class="fab fa-alipay"></i> 钉钉集成
                            </label>
                            <div class="setting-control">
                                <span class="dingtalk-mode-badge">
                                    已启用
                                </span>
                            </div>
                        </div>

                        <div class="setting-item">
                            <label class="setting-label">
                                <i class="fas fa-bolt"></i> 流式响应
                            </label>
                            <div class="setting-control">
                                <input type="checkbox" id="streamModeToggle" checked>
                            </div>
                        </div>
                                            </div>
                </div>
            </div>

            <!-- 聊天主区域 -->
            <div class="app-main">
                <div class="chat-messages" id="chatMessages">
                    <!-- 空状态提示 -->
                    <div class="empty-state" id="emptyState">
                        <i class="fas fa-comments"></i>
                        <h3>开始新的对话</h3>
                        <p>向AI助手提问，开始智能对话体验</p>
                    </div>

                    <!-- 正在输入提示 -->
                    <div class="typing-indicator" id="typingIndicator">
                        <div class="typing-dots">
                            <div class="typing-dot"></div>
                            <div class="typing-dot"></div>
                            <div class="typing-dot"></div>
                        </div>
                        <span>AI正在思考...</span>
                    </div>
                </div>

                <!-- 聊天输入区域 -->
                <div class="chat-input-container">
                    <div class="input-wrapper">
                        <div class="chat-input-wrapper">
                            <textarea
                                class="chat-input"
                                id="chatInput"
                                placeholder="输入您的问题，按 Enter 发送..."
                                rows="1"
                                maxlength="2000"
                            ></textarea>
                            <div class="input-buttons">
                                <button class="websearch-button" id="websearchButton" type="button" title="互联网搜索">
                                    <i class="fas fa-globe"></i>
                                </button>
                                <button class="send-button" id="sendButton" type="button">
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入公共函数库 -->
    <script src="/static/js/index/common/content-processor.js"></script>
    <script src="/static/js/index/common/api-service.js"></script>
    <script src="/static/js/index/common/ui-utils.js"></script>
    <script src="/static/js/index/common/data-manager.js"></script>

    <!-- 引入聊天控制器 -->
    <script src="/static/js/index/chat/chat.js"></script>

    <!-- 引入第三方库 -->
    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/marked.min.js"></script>

    <!-- 初始化脚本 -->
    <script>
        // 初始化聊天页面
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化 marked 库
            if (window.ContentProcessor && ContentProcessor.setupMarked) {
                ContentProcessor.setupMarked();
            }

            if (window.ChatController) {
                const chatController = new ChatController();
                chatController.initialize();
            }
        });
    </script>
</body>
</html>